<template>
  <div class="pay">
        <!-- 支付商品栏 -->
        <van-submit-bar :price="totalPay" :button-text="goodsTotal" @submit="onSubmit">
        </van-submit-bar>
        <!-- 底部弹框 -->
        <van-action-sheet v-model="show" title="请输入支付密码">
            <div class="content">
                <!-- 密码输入框 -->
               <van-password-input
               :value="value"
               :focused="showKeyboard"
               @focus="showKeyboard = true"
                />
                <p class="forget">忘记密码？</p>
               <!-- 数字键盘 -->
               <van-number-keyboard
               v-model="value"
                :show="showKeyboard"
                @blur="showKeyboard = false"
               />
            </div>
        </van-action-sheet>
    </div>
</template>

<script>
export default {
    data() {
        return {
            show:false,//用于弹出底部栏支付框
            value: '',//支付密码
            showKeyboard: true,
        }
    },
    watch:{
        value(){
            if(this.value.length==6){
               if(this.value=="123456"){
               this.show = false;
               this.$toast('支付成功');
               }else{
               this.show = false;
               this.$toast('支付失败');
               this.value='';
               }
            }
        }
    },
    computed:{
        totalPay(){
           return this.$store.getters.cartlist.filter((item,index)=>{
               return item.isCheck
           }).reduce((total,item2)=>{
               return total + item2.price*item2.count;
           },0);
        },
        goodsTotal() {
            return "确定支付"
        },
    },
    methods: {
        onSubmit() {
           this.show = true;
        },
    },
}

</script>
<style lang="scss" scoped>
    .van-submit-bar{
        // margin-bottom: 50px;
    }
    .van-submit-bar{
        border-top: 1px solid #f9f9f9;
    }
    //底部弹框
    .content {
    padding: 16px 16px 270px;
    }
    .forget{
        float:right;
        color: #0000FF;
    }
</style>